<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="baidu-site-verification" content="JdMif0g2tL" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script src="js/angular.min.js" charset="utf-8"></script>
</head>
<style type="text/css" media="screen">
	*{margin:0;padding: 0;font-size: 16px;outline: none;}
	img{width: 100%;}

	.red{width: 100px;height: 100px;background: red;color: #fff;}
	.green{width: 100px;height: 100px;background: blue;color: #fff;}
	.w200{width: 200px;}
	.h300{height: 300px;}
</style>
<body ng-app="myApp">

<div ng-controller="main">
	<button ng-click="btn();">投色子</button>
	<div ng-class="{red:x>50,green:x<=50}">{{x}}</div>
	<div ng-class="'green'">你好,'green'</div>
	<div ng-class="mydiv">你好,mydiv</div>
	<div ng-class="[firstClas,secondCls,'h300']">你好，[firstClas,secondCls,'h300']</div>
</div>

<script type="text/javascript">
	var app =angular.module('myApp', []);
	//创建main控制器
	//$timeout是一个服务器定时器服务，$setTimeout是一样的
	app.controller('main', ['$scope', function($scope){
		$scope.x='55';
		$scope.btn=function(){
			$scope.x=parseInt(Math.random()*100);
		}
		//通过变量绑定一个类
		$scope.mydiv='green';
		//为firstClas,secondCls
		$scope.firstClas='red';
		$scope.secondCls='w200'
	}])
</script>
<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
</body>
</html>
<!--应该12angular指令11 src动态绑定-->